<template>
  <el-container direction="vertical">
    <el-form :model="serviceForm" :rules="rules" ref="serviceForm" label-width="auto" class="demo-ruleForm serviceForm">
      <el-form-item label="报修类型" prop="typeId">
        <el-select v-model="serviceForm.typeId" placeholder="请选择报修类型" style="width: 100%">
          <el-option
            v-for="item in serviceTypes"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报修详情" prop="content">
        <el-input type="textarea" :rows="5" v-model="serviceForm.content" clearable placeholder="请输入报修详情"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('serviceForm')">报修</el-button>
        <el-button @click="resetForm('serviceForm')">重置</el-button>
        <el-button type="info" @click="$router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  import Qs from 'qs'
  export default {
    data(){
      return{
        serviceTypes:[],
        serviceForm:{
          userId: null,
          userName: '',
          typeId: null,
          content: ''
        },
        rules:{
          typeId: [
            { required:true,message:'请选择报修类型',trigger:'blur'}
          ],
          content: [
            { required:true,message:'请输入报修详情',trigger:'blur'}
          ]
        }
      }
    },
    created() {
      let user = JSON.parse(sessionStorage.getItem("user"));
      this.serviceForm.userId = user.id;
      this.serviceForm.userName = user.userName;
      /*加载报修类型列表*/
      this.getServiceTypes();
    },
    methods:{
      /*获取报修类型列表*/
      getServiceTypes(){
        this.$http.get('/serviceType/query').then((response)=>{
            if(response.status === 200) {
              if (response.data.code === 10000) {
                this.serviceTypes = response.data.data;
              }else {
                this.$notify.error({
                  title: '错误',
                  message: response.data.msg,
                  duration: 1000
                });
              }
            }else {
              this.$notify.error({
                title: '错误',
                message: response.status + response.statusText,
                duration: 1000
              });
            }
          })
      },
      /*提交在线报修表单信息*/
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = Qs.stringify(this.serviceForm);
            this.$http.post('/service/add',params)
              .then((response)=>{
                if(response.status === 200){
                  if(response.data.code === 10000){
                    this.$notify({
                      title: '报修成功',
                      message: "报修编号:"+response.data.data.id,
                      duration: 1500
                    })
                    this.serviceForm = {};
                  }else{
                    this.$notify.error({
                      title: '错误',
                      message: response.data.msg,
                      duration: 1000
                    });
                  }
                }else{
                  this.$notify.error({
                    title: '错误',
                    message: response.status + response.statusText,
                    duration: 1000
                  });
                }
              })
          }
        });
      },
      resetForm(formName){
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>

</style>
